<template>
  <section>
    <el-dialog title="试卷详情" :visible.sync="dialogVisible" @open="onOpen">
      <el-input type="text" v-model="paper.Name" placeholder="请输入名称"></el-input>
      <!--<el-input type="text" v-model="paper.Sids" placeholder="请输入Sids"></el-input>-->
      <el-tag
        :key="sid"
        v-for="sid in paper.Sids"
        closable
        :disable-transitions="false"
        @close="handleClose(sid)">
        {{sid}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Sid</el-button>
    </el-dialog>
  </section>
</template>

<script>
export default {
  name: 'PaperView',
  props: ['visible', 'paper'],
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data: function () {
    return {
      inputVisible: false,
      inputValue: ''
    }
  },
  methods: {
    onOpen: function () {
      // this.getPaper()
    },
    handleClose (tag) {
      console.log(tag)
      this.paper.Sids.splice(this.paper.Sids.indexOf(tag), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        this.paper.Sids.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style scoped>

</style>
